<!--
 * @Date: 2024-07-11 14:49:26
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-07-16 09:46:09
 * @FilePath: \reslib-web\src\views\knowledge\nodeMaintenance\index.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <div class="node-maintenance">
    <ContentWrap>
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :inline="true"
        :model="ruleForm"
        class="demo-form-inline search"
      >
        <el-form-item
          v-show="activeName === '1'"
          label="实体名称"
          :label-width="formLabelWidth"
          prop="entityName"
        >
          <el-autocomplete
            v-model="ruleForm.entityName"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            clearable
            class="inline-input w-50"
            placeholder="请输入实体名称"
            @select="onSubmit(ruleFormRef)"
          />
        </el-form-item>
        <el-form-item
          v-show="activeName === '2'"
          label="事件名称"
          :label-width="formLabelWidth"
          prop="entityName"
        >
          <el-autocomplete
            v-model="ruleForm.eventName"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            clearable
            class="inline-input w-50"
            placeholder="请输入事件名称"
            @select="onSubmit(ruleFormRef)"
          />
        </el-form-item>
        <el-form-item
          v-show="activeName === '3'"
          label="地点名称"
          :label-width="formLabelWidth"
          prop="entityName"
        >
          <el-autocomplete
            v-model="ruleForm.place"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            clearable
            class="inline-input w-50"
            placeholder="请输入地点名称"
            @select="onSubmit(ruleFormRef)"
          />
        </el-form-item>
        <el-form-item
          v-show="activeName === '4'"
          label="起止日期"
          :label-width="formLabelWidth"
          prop="entityName"
        >
          <el-date-picker
            v-model="ruleForm.inputSearch"
            type="daterange"
            range-separator="To"
            start-placeholder="请输入起始时间"
            end-placeholder="请输入终止时间"
          />
        </el-form-item>
        <el-form-item
          class="search-middle"
          v-show="activeName === '2'"
          label="复杂检索"
          :label-width="formLabelWidth"
        >
          <el-select v-model="select" placeholder="Select" style="width: 115px">
            <el-option label="所在地" value="eventLocation" />
            <el-option label="发生时间" value="eventDate" />
            <el-option label="描述" value="desc" />
          </el-select>
          <el-input
            v-if="select === 'eventLocation'"
            v-model="ruleForm.eventLocation"
            style="max-width: 600px"
            placeholder="请输入所在地"
          />
          <el-date-picker
            v-if="select === 'eventDate'"
            v-model="ruleForm.eventDate"
            type="daterange"
            range-separator="To"
            start-placeholder="请输入起始时间"
            end-placeholder="请输入终止时间"
          />
          <el-input
            v-if="select === 'desc'"
            v-model="ruleForm.desc"
            style="max-width: 600px"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit(ruleFormRef)" :icon="Search">搜索</el-button>
          <el-button @click="resetForm(ruleFormRef)" :icon="Refresh">重置</el-button>
          <el-button @click="handleAdd(activeName, 'add')" :icon="Plus" plain type="primary"
            >添加</el-button
          >
          <el-button
            v-show="[1, 2].includes(Number(activeName))"
            @click="handleImport"
            :icon="Download"
            plain
            type="warning"
            >导入</el-button
          >
          <el-button
            @click="handleEntityFusion()"
            plain
            type="success"
            :icon="Histogram"
            :disabled="tableModule.tableData.filter((item) => item.checked).length !== 2"
            >实体融合</el-button
          >
          <!-- <el-button :icon="Plus">知识抽取</el-button> -->
        </el-form-item>
        <el-form-item style="float: right; margin-right: 0">
          <el-button @click="goBack" :icon="ArrowLeft" plain type="info">返回</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <el-tabs v-model="activeName" type="border-card" @tab-change="handleTabChange()">
      <div style="height: 560px">
        <el-auto-resizer>
          <template #default="{ height, width }">
            <el-table-v2
              :key="keyRendering"
              :columns="columns"
              :data="tableModule.tableData"
              :width="width"
              :height="height"
              fixed
              @selection-change="handleSelectionChange"
            />
          </template>
        </el-auto-resizer>
      </div>
      <el-pagination
        :current-page="tableModule.currentPage"
        :page-size="tableModule.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableModule.count"
        @tab-click="handleTabClick"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-tab-pane label="人物图谱" name="1" />
      <el-tab-pane label="事件图谱" name="2" />
      <el-tab-pane label="地点图谱" name="3" />
      <!-- <el-tab-pane label="时间图谱" name="4" /> -->
    </el-tabs>
    <!-- 添加编辑表单弹窗（节点维护弹窗） -->
    <nodeDialog ref="nodeDialogRef" @subEvent="getTableData" :dialogTitle="dialogTitle" />
    <!-- 关系维护弹窗 -->
    <relationshipDialog
      ref="relationshipDialogRef"
      @subEvent="getTableData"
      :operationalData="operationalData"
      dialogTitle="关系维护"
    />
    <importForm ref="importFormRef" :activeName="activeName" />
  </div>
</template>
<script lang="tsx" setup>
console.log('tsx行数')
import * as FormApi from '@/api/knowledge/character'
import { useRouter, useRoute } from 'vue-router'
import {
  Search,
  Refresh,
  Plus,
  Upload,
  Download,
  ArrowLeft,
  Histogram
} from '@element-plus/icons-vue'
import type { FormInstance, FormRules, Column } from 'element-plus'
import type { CheckboxValueType } from 'element-plus'
import dayjs from 'dayjs'
import nodeDialog from './nodeDialog.vue'
import relationshipDialog from './relationshipDialog.vue'
import importForm from './importForm.vue'
import nodeMaintenanceImg from '@/assets/imgs/nodeMaintenance.jpg'
import defaultImage from '@/assets/imgs/defaultImage.png'
const router = useRouter()
const route = useRoute()
const ruleFormRef = ref<FormInstance>()
const keyRendering = ref(1)
const nodeDialogRef = ref()
const relationshipDialogRef = ref()
const dialogTitle = ref<string>()
const input3 = ref('')
const select = ref('eventLocation')
interface RestaurantItem {
  value: string
  link: string
}
const restaurants = ref<RestaurantItem[]>([])
const restaurantsArray = reactive({}) // 自动补全数据源
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  }
}
const handleSelectionChange = (selection) => {
  console.log(selection)
  // 当选中的行数超过最大限制数时，取消最早的选中
  // if (selection.length > this.maxSelectionCount) {
  //   selection.splice(0, selection.length - this.maxSelectionCount);
  // }
  // this.multipleSelection = selection;
}
interface RuleForm {
  entityName: string
}
const goBack = () => {
  router.go(-1)
}
const ruleForm = reactive<RuleForm>({
  entityName: '',
  desc: '',
  place: '',
  inputSearch: '',
  eventDate: ''
})
const rules = reactive<FormRules<RuleForm>>({
  entityName: [{ required: false, message: '请输入实体名称', trigger: 'change' }]
})
const formLabelWidth = '80px'
// 表格数据
const tableModule = reactive({
  tableData: [], // 表格数据
  currentPage: 1, // 表格分页：当前页
  pageSize: 10, // 表格分页：每页显示条目个数
  count: 1 // 表格分页：总记录数
})
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('1')
const handleTabChange = () => {
  ++keyRendering.value
  console.log('activeName.valueactiveName.value', activeName.value)
  columns.forEach((item) => {
    tableModule.currentPage = 1
    if (activeName.value === '1') {
      item.hidden =
        item.key === 'sentence' ||
        item.key === 'desc' ||
        item.key === 'eventName' ||
        item.key === 'eventDateTimeSuspect' ||
        item.key === 'eventLocationSuspect' ||
        item.key === 'persons' ||
        item.key === 'orgs' ||
        item.key === 'verbDescription' ||
        item.key === 'eventVerb' ||
        item.key === 'eventDate' ||
        item.key === 'eventLocation' ||
        item.key === 'recipient' ||
        item.key === 'agent' ||
        item.key === 'place' ||
        item.key === 'occurrenceTime'
          ? true
          : false
    } else if (activeName.value === '2') {
      item.hidden =
        item.key === 'entityName' ||
        item.key === 'entityPhotoUrl' ||
        item.key === 'place' ||
        item.key === 'occurrenceTime'
          ? true
          : false
    } else if (activeName.value === '3') {
      item.hidden =
        item.key === 'sentence' ||
        item.key === 'desc' ||
        item.key === 'persons' ||
        item.key === 'orgs' ||
        item.key === 'verbDescription' ||
        item.key === 'eventVerb' ||
        item.key === 'eventDate' ||
        item.key === 'eventLocation' ||
        item.key === 'recipient' ||
        item.key === 'agent' ||
        item.key === 'entityName' ||
        item.key === 'entityPhotoUrl' ||
        item.key === 'occurrenceTime'
          ? true
          : false
    } else if (activeName.value === '4') {
      item.hidden =
        item.key === 'sentence' ||
        item.key === 'desc' ||
        item.key === 'persons' ||
        item.key === 'orgs' ||
        item.key === 'verbDescription' ||
        item.key === 'eventVerb' ||
        item.key === 'eventDate' ||
        item.key === 'eventLocation' ||
        item.key === 'recipient' ||
        item.key === 'agent' ||
        item.key === 'entityName' ||
        item.key === 'entityPhotoUrl' ||
        item.key === 'place'
          ? true
          : false
    }
  })
  getTableData(activeName.value)
}
// 重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  Object.keys(ruleForm).map((item) => (ruleForm[item] = ''))
  ElMessage({
    message: '重置成功',
    grouping: true,
    showClose: true,
    type: 'success'
  })
  getTableData(activeName.value)
}
// 分页：pageSize 改变时会触发
const handleSizeChange = (val: number) => {
  tableModule.pageSize = val
  getTableData(activeName.value)
}
// 分页：currentPage 改变时会触发
const handleCurrentChange = (val: number) => {
  tableModule.currentPage = val
  getTableData(activeName.value)
}
const getTableData = (entityType) => {
  console.log('entityType', entityType)
  return new Promise((resolve, reject) => {
    try {
      const params = {
        graphId: route.query.graphId,
        // releaseStatus: 0, // 发布状态：0未发布 1已发布
        entityType: entityType || activeName.value, // tabs状态：1 人物图谱 2 事件图谱 3 地点图谱 4 时间图谱
        // entityType: entityType, // tabs状态：1 人物图谱 2 事件图谱 3 地点图谱 4 时间图谱
        pageNo: tableModule.currentPage,
        pageSize: tableModule.pageSize
      }
      if (activeName.value === '1') {
        Object.assign(params, { entityName: ruleForm.entityName })
        FormApi.getGraphEntityPage(params).then((res) => {
          tableModule.tableData = res.list
          tableModule.count = res.total
          loadAll(res.total)
          resolve(res)
        })
      } else if (activeName.value === '2') {
        Object.assign(params, { entityName: ruleForm.entityName })
        Object.assign(params, { eventName: ruleForm.eventName })
        Object.assign(params, { eventLocation: ruleForm.eventLocation })
        if (ruleForm.eventDate) {
          Object.assign(params, {
            queryTimeStart: dayjs(ruleForm.eventDate[0]).format('YYYY/MM/DD')
          })
          Object.assign(params, { queryTimeEnd: dayjs(ruleForm.eventDate[1]).format('YYYY/MM/DD') })
        }
        FormApi.getGraphEventPage(params).then((res) => {
          tableModule.tableData = res.list
          tableModule.count = res.total
          loadAll(res.total)
          resolve(res)
        })
      } else if (activeName.value === '3') {
        Object.assign(params, { place: ruleForm.place })
        FormApi.getGraphPlacePage(params).then((res) => {
          tableModule.tableData = res.list
          tableModule.count = res.total
          loadAll(res.total)
          resolve(res)
        })
      } else if (activeName.value === '4') {
        if (ruleForm.inputSearch) {
          Object.assign(params, {
            queryTimeStart: dayjs(ruleForm.inputSearch[0]).format('YYYY/MM/DD')
          })
          Object.assign(params, {
            queryTimeEnd: dayjs(ruleForm.inputSearch[1]).format('YYYY/MM/DD')
          })
        }
        FormApi.getGraphTimePage(params).then((res) => {
          // Object.assign(tableModule.tableData, res.list)
          tableModule.tableData = res.list
          tableModule.count = res.total
          resolve(res)
        })
      }
    } catch {
      reject()
    } finally {
      console.log('getTableData')
      console.log('Promise执行完毕')
    }
  })
}
onMounted(() => {
  getTableData(activeName.value)
})

const loadAll = (total) => {
  const params = {
    graphId: route.query.graphId,
    entityType: activeName.value, // tabs状态：1 人物图谱 2 事件图谱 3 地点图谱 4 时间图谱
    pageNo: tableModule.currentPage,
    pageSize: total
  }
  if (activeName.value === '1' && !restaurantsArray[activeName.value]) {
    Object.assign(params, { entityName: ruleForm.entityName })
    FormApi.getGraphEntityPage(params).then((res) => {
      res.list.map((item) => (item.value = item.entityName))
      restaurantsArray[activeName.value] = res.list
      restaurants.value = restaurantsArray[activeName.value]
    })
  } else if (activeName.value === '2' && !restaurantsArray[activeName.value]) {
    Object.assign(params, { desc: ruleForm.desc })
    FormApi.getGraphEventPage(params).then((res) => {
      res.list.map((item) => (item.value = item.desc))
      restaurantsArray[activeName.value] = res.list
      restaurants.value = restaurantsArray[activeName.value]
    })
  } else if (activeName.value === '3' && !restaurantsArray[activeName.value]) {
    Object.assign(params, { place: ruleForm.place })
    FormApi.getGraphPlacePage(params).then((res) => {
      res.list.map((item) => (item.value = item.place))
      restaurantsArray[activeName.value] = res.list
      restaurants.value = restaurantsArray[activeName.value]
    })
  }
}
// 导入
const importFormRef = ref()
const handleImport = () => {
  importFormRef.value.open()
}

// 添加
const handleAdd = (data: any, handleType: string) => {
  console.log(handleType)
  nodeDialogRef.value.open(data, handleType)
  if (handleType === 'add') dialogTitle.value = '新增实体'
  if (handleType === 'edit') dialogTitle.value = '编辑实体'
}
let entityRelationshipData = []
const operationalData = reactive({})
// 维护
const maintenance = (data: any, handleType: string) => {
  Object.assign(operationalData, data.rowData)
  let params
  if (activeName.value === '1') {
    params = {
      entity: data.rowData.entityName,
      graphName: route.query.graphName
    }
    if (handleType === 'relationship') {
      FormApi.findNeo4jByEntity(params).then((res) => {
        entityRelationshipData = []
        Object.assign(entityRelationshipData, res)
        relationshipDialogRef.value.open(data, entityRelationshipData, activeName.value)
      })
    } else if (handleType === 'visualization')
      router.push({
        path: '/knowledge/nodeMaintenance/visualization',
        query: {
          graphName: route.query.graphName,
          graphId: route.query.graphId,
          entity: data.rowData.entityName
        }
      })
  } else if (activeName.value === '2') {
    params = {
      entity: data.rowData.eventName,
      graphName: route.query.graphName
    }
    if (handleType === 'relationship') {
      FormApi.findNeo4jByEntity(params).then((res) => {
        entityRelationshipData = []
        Object.assign(entityRelationshipData, res)
        relationshipDialogRef.value.open(data, entityRelationshipData, activeName.value)
      })
    } else if (handleType === 'visualization')
      router.push({
        path: '/knowledge/nodeMaintenance/visualization',
        query: {
          graphName: route.query.graphName,
          graphId: route.query.graphId,
          entity: data.rowData.eventName
        }
      })
  }
}
/**
 * @description: 发布/取消发布
 * @param {*} data 操作数据
 * @param {*} type true（发布）false（取消发布）
 * @return {*}
 * @author: 叶世超
 */
const handleRelease = (rowData: any, type: boolean) => {
  console.log(rowData)
  console.log('发布')
  // console.log(data.rowData.id)
  const params = {
    // ids: data.rowData.id
    ids: rowData.id
  }
  if (type) {
    if (activeName.value === '1')
      FormApi.updateGraphEntityReleaseStatus1(params).then((res) => getTableData(activeName.value))
    else if (activeName.value === '2')
      FormApi.updateGraphEventReleaseStatus1(params).then((res) => getTableData(activeName.value))
    else if (activeName.value === '3')
      FormApi.updateGraphPlaceReleaseStatus1(params).then((res) => getTableData(activeName.value))
    else if (activeName.value === '4')
      FormApi.updateGraphTimeReleaseStatus1(params).then((res) => getTableData(activeName.value))
  } else {
    if (activeName.value === '1')
      FormApi.updateGraphEntityReleaseStatus0(params).then((res) => getTableData(activeName.value))
    else if (activeName.value === '2')
      FormApi.updateGraphEventReleaseStatus0(params).then((res) => getTableData(activeName.value))
    else if (activeName.value === '3')
      FormApi.updateGraphPlaceReleaseStatus0(params).then((res) => getTableData(activeName.value))
    else if (activeName.value === '4')
      FormApi.updateGraphTimeReleaseStatus0(params).then((res) => getTableData(activeName.value))
  }
}
// 删除
const handleDelete = (data: any) => {
  console.log(data)
  ElMessageBox.confirm('确定永久删除该条数据吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      console.log(data.rowData.id)
      if (activeName.value === '1') {
        FormApi.deleteHybaseGraphEntity(data.rowData.id)
          .then((res: any) => {
            if (res.data === 0) return
            ElMessage({
              type: 'success',
              grouping: true,
              showClose: true,
              message: '删除已完成'
            })
            getTableData(activeName.value)
          })
          .catch((error: any) => {
            ElMessage({
              message: error,
              grouping: true,
              showClose: true,
              type: 'error'
            })
          })
      } else if (activeName.value === '2') {
        FormApi.deleteHybaseGraphEvent(data.rowData.id)
          .then((res: any) => {
            if (res.data === 0) return
            ElMessage({
              type: 'success',
              grouping: true,
              showClose: true,
              message: '删除已完成'
            })
            getTableData(activeName.value)
          })
          .catch((error: any) => {
            ElMessage({
              message: error,
              grouping: true,
              showClose: true,
              type: 'error'
            })
          })
      } else if (activeName.value === '3') {
        FormApi.deleteHybaseGraphPlace(data.rowData.id)
          .then((res: any) => {
            if (res.data === 0) return
            ElMessage({
              type: 'success',
              grouping: true,
              showClose: true,
              message: '删除已完成'
            })
            getTableData(activeName.value)
          })
          .catch((error: any) => {
            ElMessage({
              message: error,
              grouping: true,
              showClose: true,
              type: 'error'
            })
          })
      } else if (activeName.value === '4') {
        FormApi.deleteHybaseGraphTime(data.rowData.id)
          .then((res: any) => {
            if (res.data === 0) return
            ElMessage({
              type: 'success',
              grouping: true,
              showClose: true,
              message: '删除已完成'
            })
            getTableData(activeName.value)
          })
          .catch((error: any) => {
            ElMessage({
              message: error,
              grouping: true,
              showClose: true,
              type: 'error'
            })
          })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        grouping: true,
        showClose: true,
        message: '删除已取消'
      })
    })
}
// 搜索
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) getTableData(activeName.value)
    else console.log('error submit!', fields)
  })
}
// 实体融合
const handleEntityFusion = () => {
  console.log(tableModule.tableData)
  const idArray = tableModule.tableData.filter((item) => item.checked).map((it) => it.id)
  console.log(idArray)
}
import {
  ElInput,
  ElSelect,
  Column,
  InputInstance,
  ElRadioGroup,
  ElCheckboxGroup
} from 'element-plus'
import type { FunctionalComponent } from 'vue'
type SelectionCellProps = {
  value: string
  selectValue: string
  min: number
  max: number
  intermediate?: boolean
  onChange: (value: string) => void
  forwardRef: (el: InputInstance) => void
}
const InputCell: FunctionalComponent<SelectionCellProps> = ({ value, onChange, forwardRef }) => {
  return <ElInput ref={forwardRef as any} onInput={onChange} modelValue={value} />
}
// 节点关系数据
const nodeRelationshipData = [
  { label: '正确', value: '0' },
  { label: '错误', value: '1' }
]
const SelectCell: FunctionalComponent<SelectionCellProps> = ({ value, selectValue }) => {
  return h(
    // ElSelect,
    ElRadioGroup,
    {
      // modelValue: selectValue,
      modelValue: value,
      'onUpdate:modelValue': (value: any, index: number) => {
        console.log('=log=onUpdate:modelValue=', value, index)
        selectValue = value
        // selectValue = value
      },
      // placeholder: '请选择节点关系',
      // clearable: true,
      // style: 'width: 100%; padding: 20px 0px;',
      onChange: (value) => {
        // console.log('rowData',rowData)
        // handleRelease(value, true)
        console.log('onChange', value, selectValue)
      }
    },
    () => {
      const optionDom = []
      nodeRelationshipData.forEach((row) => {
        optionDom.push(h(ElRadio, { label: row.label, value: row.value }))
      })
      return optionDom
    }
  )
}

// type SelectionCellProps = {
//   value: boolean
//   intermediate?: boolean
//   onChange: (value: CheckboxValueType) => void
// }
import { ElCheckbox } from 'element-plus'
const SelectionCell: FunctionalComponent<SelectionCellProps> = ({
  value,
  intermediate = false,
  onChange
}) => {
  return (
    <ElCheckbox
      onChange={onChange}
      modelValue={value}
      indeterminate={intermediate}
      disabled={!value && tableModule.tableData.filter((item) => item.checked).length === 2}
    />
  )
}
// const SelectionCell: FunctionalComponent<SelectionCellProps> = ({
//   value,
//   intermediate = false,
//   onChange,
// }) => {
//   return (
//     h(
//       // ElSelect,
//       // ElRadioGroup,
//       ElCheckboxGroup,
//       {
//         modelValue: value,
//         min: 0,
//         max: 2,
//       },
//       // () => {
//       //   return
//       //   <ElCheckbox
//       //     onChange={onChange}
//       //     modelValue={value}
//       //     indeterminate={intermediate}
//       //     min={1}
//       //     max={2}
//       //   />
//       // }
//       // () => {
//       //   const optionDom = []
//       //   optionDom.push(h(ElCheckbox, { onChange: onChange, modelValue: value, indeterminate: intermediate}))
//       //   // optionDom.push(h(ElCheckbox, {}))
//       //   return optionDom
//       // }
//     )

//   )
// }

const columns: Column<object>[] = [
  {
    key: 'selection',
    width: 30,
    cellRenderer: ({ rowData }) => {
      const onChange = (value: CheckboxValueType) => {
        console.log(tableModule.tableData)
        const idArray = tableModule.tableData.filter((item) => item.checked).map((it) => it.id)
        console.log(idArray)
        // rowData.checked = value

        if (idArray.length <= 2) {
          rowData.checked = value
        }
      }
      return <SelectionCell value={rowData.checked} onChange={onChange} min={1} max={2} />
    },
    headerCellRenderer: () => {
      const _data = unref(tableModule.tableData)
      const onChange = (value: CheckboxValueType) =>
        (tableModule.tableData = _data.map((row) => {
          // row.checked = value
          console.log(tableModule.tableData)
          const idArray = tableModule.tableData.filter((item) => item.checked).map((it) => it.id)
          console.log(idArray)
          if (idArray.length <= 2) {
            // row.checked = value
          }
          return row
        }))
      const allSelected = _data.every((row) => row.checked)
      const containsChecked = _data.some((row) => row.checked)

      return (
        <SelectionCell
          min={1}
          max={2}
          value={allSelected}
          intermediate={containsChecked && !allSelected}
          onChange={onChange}
        />
      )
    }
  },
  // {
  //   key: 'id',
  //   title: '实体ID',
  //   dataKey: 'id',
  //   width: 200,
  //   align: 'center',
  //   cellRenderer: ({ cellData: id }) => (
  //     <el-tooltip content={id}>{<span class="table-ellipsis">{id}</span>}</el-tooltip>
  //   )
  // },
  {
    key: 'graphName',
    title: '图谱名称',
    dataKey: 'graphName',
    width: 100,
    align: 'center',
    cellRenderer: ({ cellData: graphName }) => <div>{graphName}</div>
  },
  {
    key: 'place',
    title: '地点',
    dataKey: 'place',
    width: 200,
    align: 'center',
    hidden: true,
    cellRenderer: ({ cellData: place }) => <div>{place}</div>
  },
  {
    key: 'occurrenceTime',
    title: '时间',
    dataKey: 'occurrenceTime',
    width: 200,
    align: 'center',
    hidden: true,
    cellRenderer: ({ cellData: occurrenceTime }) => <div>{occurrenceTime}</div>
  },
  {
    key: 'entityName',
    title: '实体名称',
    dataKey: 'entityName',
    width: 200,
    align: 'center',
    hidden: false,
    cellRenderer: ({ cellData: entityName }) => (
      <el-tooltip content={entityName}>
        {<span class="table-ellipsis">{entityName}</span>}
      </el-tooltip>
    )
  },
  {
    key: 'entityPhotoUrl',
    title: '实体图片',
    dataKey: 'entityPhotoUrl',
    width: 100,
    align: 'center',
    cellRenderer: ({ cellData: entityPhotoUrl }) => (
      // <img src={entityPhotoUrl as unknown as string} height={50} />
      // <img src={entityPhotoUrl || nodeMaintenanceImg} height={50} />
      <img src={entityPhotoUrl || defaultImage} height={50} />
    )
  },
  {
    key: 'eventName',
    title: '事件名称',
    dataKey: 'eventName',
    width: 100,
    align: 'center',
    hidden: true,
    cellRenderer: ({ cellData: eventName }) => (
      <el-tooltip content={eventName}>{<span class="table-ellipsis">{eventName}</span>}</el-tooltip>
    )
  },
  {
    key: 'desc',
    title: '事件描述',
    dataKey: 'desc',
    width: 100,
    align: 'center',
    hidden: true,
    cellRenderer: ({ cellData: desc }) => (
      <el-tooltip content={desc}>{<span class="table-ellipsis">{desc}</span>}</el-tooltip>
    )
  },
  // {
  //   key: 'persons',
  //   title: '事件相关人物',
  //   dataKey: 'persons',
  //   width: 100,
  //   align: 'center',
  //   hidden: true,
  //   cellRenderer: ({ cellData: persons }) => (
  //     <el-tooltip content={persons}>{<span class="table-ellipsis">{persons}</span>}</el-tooltip>
  //   )
  // },
  // {
  //   key: 'orgs',
  //   title: '事件相关机构',
  //   dataKey: 'orgs',
  //   width: 100,
  //   align: 'center',
  //   hidden: true,
  //   cellRenderer: ({ cellData: orgs }) => (
  //     <el-tooltip content={orgs}>{<span class="table-ellipsis">{orgs}</span>}</el-tooltip>
  //   )
  // },
  // {
  //   key: 'verbDescription',
  //   title: '事件动词描述',
  //   dataKey: 'verbDescription',
  //   width: 100,
  //   align: 'center',
  //   hidden: true,
  //   cellRenderer: ({ cellData: verbDescription }) => (
  //     <el-tooltip content={verbDescription}>
  //       {<span class="table-ellipsis">{verbDescription}</span>}
  //     </el-tooltip>
  //   )
  // },
  // {
  //   key: 'eventVerb',
  //   title: '事件动词',
  //   dataKey: 'eventVerb',
  //   width: 100,
  //   align: 'center',
  //   hidden: true,
  //   cellRenderer: ({ cellData: eventVerb }) => (
  //     <el-tooltip content={eventVerb}>{<span class="table-ellipsis">{eventVerb}</span>}</el-tooltip>
  //   )
  // },
  {
    key: 'eventDate',
    title: '事件发生时间',
    dataKey: 'eventDate',
    width: 100,
    align: 'center',
    hidden: true,
    cellRenderer: ({ cellData: eventDate }) => (
      <el-tooltip content={dayjs(eventDate).format('YYYY/MM/DD')}>
        {<span class="flex items-center">{dayjs(eventDate).format('YYYY/MM/DD')}</span>}
      </el-tooltip>
    )
  },
  {
    key: 'eventLocation',
    title: '事件发生地',
    dataKey: 'eventLocation',
    width: 100,
    align: 'center',
    hidden: true,
    cellRenderer: ({ cellData: eventLocation }) => (
      <el-tooltip content={eventLocation}>
        {<span class="table-ellipsis">{eventLocation}</span>}
      </el-tooltip>
    )
  },
  {
    key: 'eventLocationSuspect',
    title: '疑似事件发生地',
    dataKey: 'eventLocationSuspect',
    width: 100,
    align: 'center',
    hidden: true,
    cellRenderer: ({ cellData: eventLocationSuspect }) => (
      <el-tooltip content={eventLocationSuspect}>
        {<span class="table-ellipsis">{eventLocationSuspect}</span>}
      </el-tooltip>
    )
  },
  {
    key: 'eventDateTimeSuspect',
    title: '疑似事件发生时间',
    dataKey: 'eventDateTimeSuspect',
    width: 100,
    align: 'center',
    hidden: true,
    cellRenderer: ({ cellData: eventDateTimeSuspect }) => (
      <el-tooltip content={dayjs(eventDateTimeSuspect).format('YYYY/MM/DD')}>
        {<span class="flex items-center">{dayjs(eventDateTimeSuspect).format('YYYY/MM/DD')}</span>}
      </el-tooltip>
    )
  },
  // {
  //   key: 'recipient',
  //   title: '受事者',
  //   dataKey: 'recipient',
  //   width: 100,
  //   align: 'center',
  //   hidden: true,
  //   cellRenderer: ({ cellData: recipient }) => (
  //     <el-tooltip content={recipient}>{<span class="table-ellipsis">{recipient}</span>}</el-tooltip>
  //   )
  // },
  // {
  //   key: 'agent',
  //   title: '施事者',
  //   dataKey: 'agent',
  //   width: 100,
  //   align: 'center',
  //   hidden: true,
  //   cellRenderer: ({ cellData: agent }) => (
  //     <el-tooltip content={agent}>{<span class="table-ellipsis">{agent}</span>}</el-tooltip>
  //   )
  // },
  // {
  //   key: 'releaseStatus',
  //   title: '发布状态',
  //   dataKey: 'releaseStatus',
  //   width: 100,
  //   align: 'center',
  //   cellRenderer: ({ cellData: releaseStatus }) => (
  //     <>
  //       <el-tag v-show={Number(releaseStatus) === 0} type="info">
  //         未发布
  //       </el-tag>
  //       <el-tag v-show={Number(releaseStatus) === 1} type="primary">
  //         已发布
  //       </el-tag>
  //     </>
  //   )
  // },
  {
    key: 'releaseStatus',
    title: '发布状态',
    dataKey: 'releaseStatus',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData, rowData, column }) => {
      const onChange = (value: string) => {
        console.log('cellData, rowData, column', cellData, rowData, column)
        console.log('rowData[column.dataKey!]', rowData[column.dataKey!])
        rowData[column.dataKey!] = String(value)
        if (String(value) === '0') handleRelease(rowData, false)
        else if (String(value) === '1') handleRelease(rowData, true)
      }
      const onEnterEditMode = () => {
        console.log(rowData)
        // editing为唯一属性，如多个列需要编辑时，需要使用新的属性名（editing2）
        rowData.editing = true
      }
      const onExitEditMode = () => (rowData.editing = false)
      const input = ref()
      const setRef = (el) => {
        input.value = el
        if (el) {
          el.focus?.()
        }
      }
      // return rowData.editing ? (
      //   <SelectCell
      //     forwardRef={setRef}
      //     selectValue={rowData[column.dataKey!]}
      //     onChange={onChange}
      //     onBlur={onExitEditMode}
      //     onKeydownEnter={onExitEditMode}
      //   />
      // ) : (
      //   <div class="table-v2-inline-editing-trigger" onClick={onEnterEditMode}>
      //     {rowData[column.dataKey!]}
      //   </div>
      // )
      return (
        <SelectCell
          forwardRef={setRef}
          value={String(rowData[column.dataKey!])}
          onChange={onChange}
          onBlur={onExitEditMode}
          onKeydownEnter={onExitEditMode}
        />
      )
    }
  },
  {
    key: 'createTime',
    title: '创建时间',
    dataKey: 'createTime',
    width: 100,
    align: 'center',
    cellRenderer: ({ cellData: createTime }) => (
      <el-tooltip content={dayjs(createTime).format('YYYY/MM/DD')}>
        {<span class="flex items-center">{dayjs(createTime).format('YYYY/MM/DD')}</span>}
      </el-tooltip>
    )
  },
  {
    key: '操作',
    title: '操作',
    cellRenderer: (data) => (
      <>
        <el-button onClick={handleAdd.bind(this, data, 'edit')} type="success" size="small">
          节点维护
        </el-button>
        <el-button
          onClick={maintenance.bind(this, data, 'relationship')}
          type="primary"
          size="small"
        >
          关系维护
        </el-button>
        <el-button
          onClick={maintenance.bind(this, data, 'visualization')}
          type="primary"
          size="small"
        >
          可视化关系维护
        </el-button>
        {/* <el-button onClick={conservationResources.bind(this, data)} type="primary" size="small">
          资源维护
        </el-button> */}
        {/* <el-button
          v-show={Number(data.rowData.releaseStatus) === 0}
          onClick={handleRelease.bind(this, data, true)}
          type="primary"
          size="small"
        >
          发布
        </el-button>
        <el-button
          v-show={Number(data.rowData.releaseStatus) === 1}
          onClick={handleRelease.bind(this, data, false)}
          type="info"
          size="small"
        >
          取消发布
        </el-button>*/}
        <el-button onClick={handleDelete.bind(this, data)} type="danger" size="small">
          删除
        </el-button>
      </>
    ),
    width: 420,
    align: 'center'
  }
]
</script>
<style lang="scss" scoped>
::v-deep(.table-ellipsis) {
  word-break: break-all; // 允许在单词内换行
  text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本
  overflow: hidden;
  white-space: nowrap; // 不换行控制单行文本
}

.node-maintenance {
  .search {
    .el-form-item {
      margin: 0 32px 0 0;
    }
  }
}

.search-middle {
  .el-select {
    ::v-deep(.el-input__wrapper) {
      border-radius: 4px 0 0 4px !important;
      background-color: #f5f7fa;
    }
  }

  .el-input {
    ::v-deep(.el-input__wrapper) {
      border-radius: 0 4px 4px 0 !important;
    }
  }

  ::v-deep(.el-date-editor) {
    border-radius: 0 4px 4px 0 !important;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 230px;
}

.demo-form-inline .el-select {
  --el-select-width: 230px;
}

::v-deep(.el-tabs__item) {
  padding: 0 50px !important;
}

::v-deep(.el-radio-group) {
  // border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
